<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详情页面</title>
    <link rel="stylesheet" href="./css/nav.css">
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet" href="./css/sidebar.css">
    <link rel="stylesheet" href="./css/detail.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 14px;
        }
    </style>
</head>

<body>

    <div class="nav">
        <div class="nav-box">
            <div class="nav-left">
                <a href="index.html">
                    <img class="logo-img" src="images/index/nav/logo.png" alt="">
                </a>

                <div class="nav-tabs">
                    <a href="index.html">首页</a>
                    <a href="category.html">分类</a>
                </div>
            </div>
            <div class="nav-right">
                <div class="nav-userinfo">
                    <div class="nav-login">
                        <a href="login.html">
                            <img class="icon-img" src="images/index/nav/icon3.png" alt="">
                            <span class="login-span">登录</span>
                        </a>
                        <div class="login-tabs">
                            <div class="login-list">
                                <a href="login.html" class="list-tab select">个人信息</a>
                                <a href="login.html" class="list-tab select">账号设置</a>
                                <a href="login.html" class="list-tab select">订单管理</a>
                                <!--<a href="" class="list-tab select">退出登录</a>-->
                            </div>
                        </div>
                    </div>
                    <div class="nav-download">
                        <img class="icon-img" src="images/index/nav/icon4.png" alt="">
                        <span class="login-span">下载</span>
                        <div class="nav-qrcode">
                            <img src="images/index/nav/qrcode.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="nav-search">
                    <img src="images/index/nav/search.png" alt="">
                    <label id="search">
                        <input class="input-search" name="search" placeholder="搜索明星、演出、体育赛事">
                    </label>
                    <input class="input-button" type="button" value="搜索">
                </div>
            </div>
        </div>
    </div>

    <div id="detail">
        <div id="detail-box">
            <div class="detail-box-left">
                <div class="detail-box-filed">
                    <div class="detail-box-content">
                        <div class="cover">
                            <img class="poster" src="./images/detail/hd.png" alt="">
                        </div>
                        <div class="order">
                            <div class="perform-title">
                                <span class="tip">总票代</span>
                                <span class="title">【北京】《漫步人生路-致敬经典演唱会》</span>
                            </div>
                            <div class="perform-info">
                                <div class="time">时间：2023.07.01-2023.07.02 周六-周日 19:30</div>
                                <div class="place">
                                    <div class="addr">场馆：北京市 | 朝阳剧场</div>
                                    <div class="map"></div>
                                </div>
                            </div>
                            <div class="perform-detail">
                                <div class="notice">
                                    <img src="./images/detail/info.png" alt="">
                                    场次时间均为演出当地时间
                                </div>
                                <div class="show">
                                    <div class="select-left">场次</div>
                                    <div class="select-right">
                                        <div class="select-right-list">
                                            <div class="list-item active">
                                                <span>
                                                    2023-07-01 周六 19:30
                                                    <span class="presell">惠</span>
                                                </span>
                                            </div>
                                            <div class="list-item">
                                                <span>
                                                    2023-07-02 周日 19:30
                                                    <span class="presell">惠</span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ticket">
                                    <div class="select-left">票档</div>
                                    <div class="select-right">
                                        <div class="select-right-list">
                                            <div class="list-item active">
                                                <div class="skuname">58元</div>
                                            </div>
                                            <div class="list-item">
                                                <div class="skuname">98元</div>
                                            </div>
                                            <div class="list-item">
                                                <div class="skuname">158元</div>
                                            </div>
                                            <div class="list-item">
                                                <div class="skuname">228元</div>
                                            </div>
                                            <div class="list-item">
                                                <div class="skuname">298元</div>
                                            </div>
                                            <div class="list-item">
                                                <div class="skuname">
                                                    双人套【300元】（原价158*2）
                                                    <span class="ticket">2人套票</span>
                                                </div>
                                            </div>
                                            <div class="list-item">
                                                <div class="skuname">
                                                    双人套【400元】（原价228*2）
                                                    <span class="ticket">2人套票</span>
                                                </div>
                                            </div>
                                            <div class="list-item">
                                                <div class="skuname">
                                                    双人套【500元】（原价298*2）
                                                    <span class="ticket">2人套票</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <div class="scan-buy">
                                        <div class="title">为了更好的购票体验</div>
                                        <div class="subtitle">请您移步手机端购买</div>
                                        <div class="qrcode-wrapper">
                                            <div class="quick-tip">手机扫码购买更便捷</div>
                                            <div class="qrcode-container">
                                                <img src="./images/detail/qrcode.png" alt="" class="qrcode-img"></div>
                                            <div class="buy-link">不，选座购买</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="detail-box-info"></div>
            </div>
            <div class="detail-box-right">
                <div class="box-right-content">
                    <div class="box-right-info">
                        <div class="info-item">
                            <div class="info-note-name">
                                <img src="./images/detail/false.png" class="info-icon-f" alt="">不支持退
                            </div>
                            <div class="info-note-desc">
                                票品为有价票券，非普通商品，其背后承载的文化服务具有时效性，稀缺性等特征，不支持退换。
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="info-note-name">
                                <img src="./images/detail/true.png" class="info-icon-t" alt="">可选座
                            </div>
                            <div class="info-note-desc">
                                本项目支持自主选座<br>
                                1. 选择演出时间，并点击“选座购票”进入选座页面<br>
                                2. 选座后，在倒计时内支付成功，选座生效<br>
                                （先付后选的项目需要先付款，到开放选座的日期我们会短信通知，请注意查收）
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="info-note-name">
                                <img src="./images/detail/true.png" class="info-icon-t" alt="">快递票、自助取票
                            </div>
                            <div class="info-note-desc">
                                快递票：纸质票会在开票后快递到您留下的收货地址，需您承担邮寄费用。发货前支持修改一次收货地址。<br>
                                注：距开演时间仅3天时，不再寄送快递票，支持在指定取票地点取票（具体以下单后票夹信息为准）<br>
                                <br>
                                自助取票：需要您在指定的取票地点取票，下单后可通过票夹中的二维码或身份证换取纸质票（具体以下单后票夹信息为准）
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="info-note-name">
                                <img src="./images/detail/true.png" class="info-icon-t" alt="">电子发票
                            </div>
                            <div class="info-note-desc">
                                该项目支持开具电子发票。该发票由第三方主办提供，需要在演出开始前提交发票申请，一般演出结束后1个月左右开具
                            </div>
                        </div>
                        <div class="info-note-qrcode">
                            <div class="info-qrcode-text">
                                <span>手机扫一扫</span>
                                <span>下单更快捷</span>
                            </div>
                            <img src="https://item-cdn.damai.cn/projQcode/7250743604/2/725074360418.jpg" alt=""
                                 class="qrcode-img">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="f-container">
            <div class="f-tabs">
                <ul class="f-links">
                    <li class="links-list">帮助中心</li>
                    <li class="links-grep">|</li>
                    <li class="links-list">公司介绍</li>
                    <li class="links-grep">|</li>
                    <li class="links-list">品牌识别</li>
                    <li class="links-grep">|</li>
                    <li class="links-list">公司大记事</li>
                    <li class="links-grep">|</li>
                    <li class="links-list">协议及隐私权政策</li>
                    <li class="links-grep">|</li>
                    <li class="links-list">廉政举报</li>
                    <li class="links-grep">|</li>
                    <li class="links-list">联系合作</li>
                    <li class="links-grep">|</li>
                    <li class="links-list">招聘信息</li>
                    <li class="links-grep">|</li>
                    <li class="links-list">防骗秘籍</li>
                </ul>
            </div>
            <div class="f-info">
                <div class="info-left">
                    <a href="index.html" class="info-logo">
                        <img src="images/index/footer/logo.png" alt="">
                    </a>
                    <div class="info-qrcode">
                        <img src="images/index/footer/qrcode.png" alt="">
                        <span>APP下载</span>
                    </div>
                </div>
                <div class="info-right">
                    <div class="info-contact">
                        <a href="https://www.tedu.cn/tmooc-kf.html">在线客服</a>
                    </div>
                    <div class="info-list">
                        <ul>
                            <li>达内广州校区</li>
                            <li class="list-grep">|</li>
                            <li>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</li>
                        </ul>
                    </div>
                    <div class="info-list">
                        <ul>
                            <li>联系方式:&nbsp;&nbsp;</li>
                            <li>woshihuahuaa@outlook.com&nbsp;&nbsp;</li>
                            <li>广州市天河区天河路351号广东外经贸大厦2楼</li>
                        </ul>
                    </div>
                    <div class="info-list">
                        <ul>
                            <li>开发团队:&nbsp;&nbsp;</li>
                            <li>颜云华&nbsp;&nbsp;叶兆康&nbsp;&nbsp;汤杰华&nbsp;&nbsp;黄智鹏</li>
                        </ul>
                    </div>
                    <div class="info-list">
                        <ul>
                            <li>Copyright © 达内广州校区black团队所有</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="sidebar">
        <div class="s-item s-block">
            <div class="s-icon damai"></div>
            <p>APP下载</p>
            <div class="s-qrcode"></div>
        </div>
        <div class="s-item" id="scroll-top">
            <div class="s-icon gotop"></div>
            <p>回到顶部</p>
        </div>
    </div>

    <script type="text/javascript" src="./js/index.js"></script>

</body>
</html>